<template>
  <div class="order-list-page app-container">
    <el-form ref="form" :model="searchForm" inline label-width="80px" label-suffix=":">
      <el-form-item label="订单号">
        <el-input v-model="searchForm.orderNum"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="searchForm.customer"></el-input>
      </el-form-item>
      <el-form-item label="状态">
          <el-select v-model="searchForm.orderStatus" clearable>
            <el-option v-if="pageName === 'OrderList'" label="待提交" :value="1"></el-option>
            <el-option label="待设计" :value="2"></el-option>
            <el-option label="待确认" :value="3"></el-option>
            <el-option label="待修改" :value="4"></el-option>
            <el-option label="已完成" :value="5"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker v-model="searchForm.createTimeList" type="daterange" range-separator="-" value-format='yyyy-MM-dd'></el-date-picker>
      </el-form-item>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button v-if="pageName === 'OrderList'" type="success" @click="handleAdd">新增</el-button>
      <el-button v-if="pageName === 'OrderList'" type="success" @click="handleImport">导入</el-button>
    </el-form>
    <el-table :data="tableData" @sort-change='changeSort' style="width: 100%" border>
      <el-table-column prop="order_num" label="订单号"></el-table-column>
      <el-table-column prop="order_type" label="订单类型"></el-table-column>
      <el-table-column prop="customer" label="用户名"></el-table-column>
      <el-table-column prop="order_size" label="尺码"></el-table-column>
      <el-table-column prop="want_pic" label="图案"></el-table-column>
      <el-table-column prop="order_status" label="状态">
        <template slot-scope="scope"><el-tag :type="statusTag(scope.row.order_status)">{{ formatStatus(scope.row.order_status) }}</el-tag></template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" sortable='custom'>
        <template slot-scope="scope">{{ formatTime(scope.row.create_time) }}</template>
      </el-table-column>
      <el-table-column prop="date" label="操作" width="240px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.order_status !== 1" type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>
          <el-button
            v-if="(scope.row.order_status === 1 && pageName === 'OrderList') || (scope.row.order_status === 2 && pageName === 'DesignList') || (scope.row.order_status === 4 && pageName === 'DesignList')"
            type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button v-if="((scope.row.order_status === 2 || scope.row.order_status === 4) && pageName === 'DesignList') || (scope.row.order_status === 1 && pageName === 'OrderList')" type="success" size="mini" @click="handleSubmit(scope.row)">提交</el-button>
          <el-button v-if="scope.row.order_status === 3 && pageName === 'OrderList'" type="success" size="mini" @click="handleConfirm(scope.row)">确认</el-button>
          <el-button v-if="scope.row.order_status === 3 && pageName === 'OrderList'" type="danger" size="mini" @click="handleReject(scope.row)">驳回</el-button>
          <el-button v-if="scope.row.order_status === 1" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="total" :current-page.sync="currentPage" @current-change="currentChange" background layout="total, prev, pager, next, jumper"></el-pagination>
    <AddOrder :show.sync='addVisible' @refresh='handleSearch'></AddOrder>
    <ImportOrder :show.sync='importVisible' @refresh='handleSearch'></ImportOrder>
    <ConfirmOrder :show.sync='confirmVisible' @refresh='handleSearch' :row="selectRow"></ConfirmOrder>
    <RejectOrder :show.sync='rejectVisible' @refresh='handleSearch' :row="selectRow"></RejectOrder>
  </div>
</template>

<script>
import AddOrder from './addOrder.vue'
import ImportOrder from './importOrder.vue'
import ConfirmOrder from './confirmOrder.vue'
import RejectOrder from './rejectOrder.vue'
import { getOrderList, changeOrderStatus, deleteOrder } from '@/api/order'
import { getDesignList } from '@/api/design'
export default {
  components: { AddOrder, ImportOrder, ConfirmOrder, RejectOrder },
  data() {
    return {
      pageName: '',
      total: 0,
      currentPage: 1,
      addVisible: false,
      importVisible: false,
      confirmVisible: false,
      rejectVisible: false,
      selectRow: {},
      orderByColumn: 'create_time',
      ascOrDesc: 'DESC',
      searchForm: {
        orderNum: '',
        customer: '',
        orderStatus: '',
        createTimeList: [],
        startTime: '',
        endTime: ''
      },
      tableData: [],
    }
  },
  mounted() {
    this.pageName = this.$route.name
    this.getData()
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
      this.getData()
    },
    handleDetail(row) {
      this.$router.push({
        name: 'OrderDetail',
        query: {
          id: row.id
        }
      })
    },
    handleEdit(row) {
      this.$router.push({
        name: this.pageName === 'OrderList' ? 'OrderEdit' : 'DesignEdit',
        query: {
          id: row.id
        }
      })
    },
    handleAdd() {
      this.addVisible = true
    },
    handleImport() {
      this.importVisible = true
    },
    handleConfirm(row) {
      this.confirmVisible = true
      this.selectRow = row
    },
    async getData() {
      const { orderNum, customer, orderStatus } = this.searchForm
      const params = {
        page: this.currentPage, orderNum, customer, orderStatus,
        startTime: '2020-01-01', endTime: '2050-01-01',
        orderByColumn: this.orderByColumn,
        ascOrDesc: this.ascOrDesc,
      }
      if (this.searchForm.createTimeList?.length) {
        params.startTime = this.searchForm.createTimeList[0] + ' 00:00:00'
        params.endTime = this.searchForm.createTimeList[1] + ' 23:59:59'
      }
      const api = this.pageName === 'OrderList' ? getOrderList : getDesignList
      const res = await api(params)
      if(res.code === 0) {
        this.tableData = res.data
        this.total = res.total
      }
    },
    handleSubmit(row) {
      if (row.order_status === 1 && row.pic_list.length === 0) {
        this.$message({ type: 'warning', message: '请先上传原图素材' })
        return
      }
      if (row.order_status === 2 && row.design_list.length === 0) {
        this.$message({ type: 'warning', message: '请先上传设计稿' })
        return
      }
      this.$confirm('是否提交该订单?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => {
        const res = await changeOrderStatus({ id: row.id, status: row.order_status === 1 ? 2 : 3 })
        if (res.code === 0) {
          this.$message({ type: 'success', message: '提交成功!' })
        }
        this.getData()

      }).catch(() => {})
    },
    handleReject(row) {
      this.rejectVisible = true
      this.selectRow = row
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteOrder({ id: row.id })
        if (res.code === 0) {
          this.$message({ type: 'success', message: '删除成功!' })
        }
        this.getData()

      }).catch(() => {})
    },
    changeSort(param) {
      if (param.order) {
        this.orderByColumn = param.prop
        this.ascOrDesc = param.order === 'ascending' ? 'ASC' : 'DESC'
      } else {
        this.orderByColumn = 'create_time'
        this.ascOrDesc = 'DESC'
      }
      this.getData();
    },
    currentChange() {
      this.getData();
    },
  }
}
</script>
<style lang="scss">
.order-list-page{
  .el-image{
    line-height: 30px;
    vertical-align: middle;
  }
}
</style>

